<template>
    <div>
      <my-button>咯咯咯</my-button>
      <el-button>哈哈哈</el-button>
      <jsx/>
      <scopeList/>
        <todo/>
        <!-- 
        <h1>{{name}}{{age}}</h1>
        <child 
          @qqq='fn'
          :ddd='ary' 
          :age='age' 
          style="color:red" 
          class='box'></child>
           -->
           <dtai/>
           <inp/>
           <dia v-if='false'>
             <!-- <i slot='myhh'>自己的头部</i>
             <i slot='myhh'>自己的头部2</i> -->
              <template #myhh>
                <i>自己的头部</i>
                <i>自己的头部2</i>
             </template>
             <strong slot='footer'>自己的尾部</strong>
             <h1>哈哈哈</h1>
             <h2>呵呵呵</h2>
           </dia>
    </div>
</template>
<script>
// @ is an alias to /src
import child from './child.vue'
import todo from './todo'
import dtai from './3_动态组件'
import inp from './4_组件v-model'
import dia from './5_dialog'
import scopeList from './6_插槽作用域'
import jsx from './7_jsx'
export default {
    // provide:{
    //   haha:"哈哈哈"
    // },
    provide(){
      let obj = {};
      Object.defineProperty(obj,'haha',{
        get:()=>{
          return this.name
        }
      })
      console.log(obj.haha)
      return {
        obj
      }
    },
    data() {
        return {
          name:"珠峰",
          age:100,
          ary:[111,22,333]
        }
    },
    methods: {
      fn(age2){
        this.name = 666
        this.age = age2
        console.log(arguments)
      }
    },
    components: {
        child,todo,dtai,inp,dia,scopeList,jsx
    }
}
</script>
<style lang="less">

</style>